<template>
  <div id="content">
    <el-row>
      <el-col :span="18">
        <el-input placeholder="输入用户名" v-model="UserName" :disabled="inputBan">
          <template slot="prepend">用户名:</template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="UserCreate" icon="el-icon-plus" :disabled="inputBan">创建用户</el-button>
        <!-- <el-button type="primary" @click="test" icon="el-icon-plus" :disabled="inputBan">test</el-button> -->
      </el-col>
    </el-row>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>在线用户列表</span>
        <el-button style="float: right; padding: 3px 0" type="text" :disabled="Refresh" @click="getUserList">刷新</el-button>
      </div>
      <div class="cardContent" v-if="UserList.length != 0">
        <el-card class="UserMsg" shadow="hover" v-for="(item,index) in UserList" :key="index">
          <el-row>
            <el-col :span="14">
              <el-tag effect="dark">id:{{item}}</el-tag>
            </el-col>
            <el-col :span="10">
              <el-tooltip effect="dark" content="向对方发起挑战" placement="top">
                <el-button
                  type="danger"
                  icon="ri-sword-fill"
                  style="float:right;"
                  @click="UserChallenge(item)"
                >挑战</el-button>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <p v-else style="text-align: center;">请先创建用户</p>
    </el-card>

    <el-dialog title="提示" :visible.sync="ChallengeDialogVis" :close-on-click-modal="false">
      <span>
        收到来自用户:
        <strong>" {{target}} "</strong>的挑战,是否接受?
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="RequestGame(0)">拒 绝</el-button>
        <el-button type="primary" @click="RequestGame(1)">同 意</el-button>
      </span>
    </el-dialog>

    <el-dialog
      id="room"
      :title="'房间号:' + roomId"
      :visible.sync="gameDialogVis"
      :close-on-click-modal="false"
      top="3vh"
      width="750px"
    >
      <div class="gameDialog">
        <div class="chessboard" v-for="(item, i1) in maps" :key="i1">
          <el-row>
            <el-col :span="2" v-for="(items, i2) in item" :key="i2">
              <div class="chess" @click="playChess(i1,i2)">
                <div class="white" v-if="items == 2"></div>
                <div class="black" v-if="items == 1"></div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ws from "../js/Socket";
import mf from "../js/MsgFormat";
import al from "../js/MsgAlert";

export default {
  name: "index",
  data() {
    return {
      UserName: "",
      target: "test", //当收到挑战请求的时候,对方的用户名.
      ChallengeDialogVis: false,
      roomId: 0,
      canPlayChess: false,
      gameDialogVis: false,
      UserList: [],
      maps: new Array(),
      ConnectObject: 0,
      MapObject: 0,
      gobangColor: 0,
      inputBan: false,
      gameOver: false,
      Refresh: true,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChess(); //初始化棋盘
      this.ConnectObject = ws.connect(); //连接服务器
      this.ResponseMsg(); //监听服务器响应的信息
    });
  },
  destroyed: {
    ConnectClose() {
      this.ConnectObject.close();
    }
  },
  watch: {
    gameDialogVis(val) {
      if (!val) {
        if (this.gameOver) {
          this.gameDialogVis = false;
        } else {
          this.gameDialogVis = true;
          al.Alerts(0, "游戏尚未结束,不允许退出!");
        }
      }
    }
  },
  methods: {
    ResponseMsg() {
      this.ConnectObject.onmessage = res => {
        /**
         * mode 0~2 为普通信息,从前往后依次为: 普通信息/成功信息/警告信息
         */

        let data = JSON.parse(res.data);

        let mode = data.mode;
        if (mode >= 0 && mode < 3) {
          let msg = data.msg;
          if (msg == "创建用户成功!!") {
            this.inputBan = true;
            this.Refresh = false;
          }
          al.Alerts(mode, msg);
        } else {
          if (mode == 3) {
            //载入在线玩家列表
            let msg = String(data.msg);
            this.UserList = msg
              .substring(1, msg.length - 1)
              .replace(/"/g, "")
              .split(",");
          } else if (mode == 4) {
            //新增加用户
            this.UserList.push(data.msg);
          } else if (mode == 5) {
            //接收到挑战通知
            this.target = data.msg;
            this.ChallengeDialogVis = true;
          } else if (mode == 6) {
            //挑战被拒绝了,或者对方已下线
            al.Alerts(2, data.msg);
          } else if (mode == 7) {
            this.roomId = data.msg;
            this.gameDialogVis = true;
            this.initChess();
          } else if (mode == 8) {
            //是否先手的通知, 1为先手,0为后手,否则为双方对战通讯
            let msg = data.msg;
            if (msg == "1") {
              al.Alerts(0, "您是先手,拥有20秒思考时间,超时则为失败.");
              this.gobangColor = 1; //定义下棋颜色
              this.canPlayChess = true;
              //开启计时器,等待下棋
            } else if (msg == "2") {
              al.Alerts(0, "您是后手,等到对手落子.");
              this.gobangColor = 2;
            } else {
              al.Alerts(0, "轮到你了");
              console.log(msg);
              let data = JSON.parse(msg);
              let x = data.x;
              let y = data.y;
              let temp = this.maps[x];
              temp[y] = data.color;
              this.$set(this.maps, x, temp);
              this.canPlayChess = true;
            }
          } else if (mode == 9) {
            let msg = data.msg;
            this.$alert("胜利者为:" + msg, "游戏结束");

            setTimeout(() => {
              this.gameOver = true;
            }, 1000);
          } else if (mode == 10) {
            let msg = data.msg;
            this.gameOver = true;
            this.gameDialogVis = false;
            al.Alerts(1, msg);
          } else if (mode == 11) {
            let msg = data.msg;
            let index = this.UserList.indexOf(msg);
            if (index != -1) {
              this.UserList.splice(index, index + 1);
            }
          }
        }
      };
    },
    playChess(x, y) {
      if (this.canPlayChess) {
        let temp = this.maps[x];
        if (temp[y] == 0) {
          temp[y] = this.gobangColor;
          this.$set(this.maps, x, temp);
          this.canPlayChess = false;
          //通知对手下棋
          let msg = mf.PlayChess(
            this.UserName,
            this.target,
            this.gobangColor,
            x,
            y
          );
          console.log(msg);
          this.ConnectObject.send(msg);
        }
      }
    },
    initChess() {
      for (let i = 0; i < 16; i++) {
        this.maps[i] = new Array();
        for (let j = 0; j < 16; j++) {
          this.maps[i][j] = 0;
        }
      }
    },
    UserCreate() {
      //创建用户

      if (this.UserName.replace(/^\s*|\s*$/g, "") != "") {
        let msg = mf.UserCreate(this.UserName);
        this.ConnectObject.send(msg);
      } else {
        al.Alerts(2, "用户名不能为空!");
      }
    },
    UserChallenge(name) {
      //发起挑战
      this.target = name;
      al.Alerts(0, "已向对方发送挑战请求..");
      let msg = mf.UserChallenge(name);
      this.ConnectObject.send(msg);
    },
    RequestGame(agree) {
      //请求游戏
      agree = agree == 0 ? false : true;
      this.ChallengeDialogVis = false;
      let name = this.UserName;
      let target = this.target;
      let msg = mf.RequestGame(agree, name, target);
      this.ConnectObject.send(msg);
    },
    getUserList(){
      let msg = mf.UserList()
      this.ConnectObject.send(msg)

    }
  }
};
</script>

<style scoped>
body {
  height: 100vh;
  overflow-y: scroll;
}
.white,
.black {
  position: relative;
  left: -55%;
  top: -55%;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.white {
  background-color: #fff;
}
.black {
  background-color: #000;
}
.chess {
  height: 35px;
  border: 1px solid #000;
}
.el-col-2 {
  width: 35px;
}
#content {
  margin: 5vw auto;
  width: 36vw;
}
.gameDialog {
  margin: auto auto;
  padding: 3vw;
  width: 560px;
  height: 580px;
  background-color: #e2bea3;
}
.UserMsg {
  margin-bottom: 10px;
}
.UserMsg span {
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 1em;
}
.el-input {
  width: 25vw;
  margin-right: 18px;
  margin-bottom: 20px;
}
#map {
  margin: 50px;
  margin-top: 10px;
}
</style>
